<template>
	<view>
		<z-paging-swiper>
			<view slot="top">
				<view class="bg-white u-p-r-28">
					<view>
						<u-tabs-swiper active-color="#FFCF0B" ref="uTabs" :list="myMessageList" :current="current"
							@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
					</view>
				</view>
				<view class="u-text-right u-p-t-18 u-p-b-18 u-p-l-28 u-p-r-28 u-font-10 color-80">
					<text @click="read">一键已读</text>
				</view>
			</view>
			<!-- 滑动区域 -->
			<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="(item,index) in myMessageList" :key="index">
					<no-data v-if="dataList[index].length === 0" customClass="bg-f5"></no-data>
					<view class="content">
						<z-paging @onRefresh="onRefresh" :hide-empty-view="true" ref="paging" auto-show-back-to-top
							@query="queryList" :fixed="false" :auto="false" loading-more-no-more-text="暂无更多"
							style="height: 100%;">

							<view>
								<view class="u-p-l-28 u-p-r-28" v-for="(item,idx) in dataList[index]" :key="item.id">
									<view @click="goMessageGetInfo(item)"
										class="bg-white border-r-6 u-p-t-26 u-p-b-26 u-p-l-10 u-p-r-20 u-m-b-20">
										<view class=" u-font-16 color-3  u-flex u-row-between">
											<view class="title u-rela">
												{{item.has_read === 0?'【未读】':'【已读】'}}{{item.type_text}}
												<u-badge v-if="item.has_read === 0" is-center type="error"
													:is-dot="true"></u-badge>
											</view>
											<u-image @tap.stop="remove(item.id)" width="14px" height="14px"
												src="@/pagesMy/static/remove.png">
											</u-image>

										</view>
										<view class="u-font-12 color-80 u-m-t-10 u-p-l-20">
											{{item.create_time}}
										</view>
									</view>
								</view>
							</view>
						</z-paging>
					</view>
					<!-- 
					<message-swiper-item :tabIndex="index" :currentIndex="swiperCurrent">
					</message-swiper-item> -->
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	import messageSwiperItem from '@/pagesMy/components/messageSwiperItem/messageSwiperItem.vue';
	import noData from '@/components/noData/noData.vue';
	import {
		myMessageList
	} from '@/const'
	import {
		getMyMessage,
		messageSetRead,
		messageDel
	} from '@/api/user';
	export default {
		components: {
			messageSwiperItem,
			noData
		},
		data() {
			return {
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				myMessageList,
				dataList: [],
			};
		},
		onShow() {
			this.init();
		},
		methods: {
			onRefresh() {
				this.$set(this.dataList, this.swiperCurrent, []);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			async queryList(page, pageSize) {
				const postData = Object.assign({}, {
					page,
					pageSize,
					has_read: this.swiperCurrent - 1, // -1全部 0未读 1已读
				})
				const res = await getMyMessage(postData);
				const newData = res.data.list;
				this.$refs.paging[this.swiperCurrent].complete(newData);
				const oldData = this.dataList[this.swiperCurrent];
				this.$set(this.dataList, this.swiperCurrent, oldData.concat(newData));
			},
			async init() {
				const postData1 = {
					page: 1,
					pageSize: 10,
					has_read: -1,
				}

				const postData2 = {
					page: 1,
					pageSize: 10,
					has_read: 0,
				}

				const postData3 = {
					page: 1,
					pageSize: 10,
					has_read: 1,
				}
				const res1 = await getMyMessage(postData1);
				const res2 = await getMyMessage(postData2);
				const res3 = await getMyMessage(postData3);
				this.dataList = [
					res1.data.list,
					res2.data.list,
					res3.data.list,
				]
			},
			reset() {
				this.dataList = [];
				this.init();
			},
			async read() {
				const res = await messageSetRead();
				if (res.code === 1) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						mask: true,
					});
					this.reset();
				}
			},

			async remove(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该消息吗？',
					success: async (sub) => {
						if (sub.confirm) {
							const res = await messageDel({
								id
							});
							if (res.code === 1) {
								uni.showToast({
									title: res.msg,
									icon: "none",
									mask: true,
								});
								this.reset();
							}
						} else if (sub.cancel) {}
					}
				});
			},
			goMessageGetInfo(item) {
				uni.navigateTo({
					url: `/pagesMy/messageGetInfo/messageGetInfo?source=${item.type}&id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
